import React, { PureComponent } from 'react';
import { connect } from 'dva';
import myStyle from './index.less';
import LeftMenuC from './leftMenu';
import RightContent from './RightContent';
class ProfitOverview extends PureComponent {
  state = {
    moduleList: [], //用户已有的模板列表
    treeData: [], //模板设置的树形结构
    borderData: [], ///模板设置的树形结构包含对应的每个模块的组件
    moduleId: undefined, //右侧点击查询时 模板名称对应的模板id
  };

  componentDidMount() {
    //获取模板列表
    this.getModuleList();
    //查询模板设置数据
    this.queryTreeData();
  }
  getModuleList = () => {
    //获取模板列表
    const { dispatch } = this.props;
    var that = this;
    let p = new Promise(function (resolve, reject) {
      dispatch({
        type: 'profitOverviewM/getModuleList',
        payload: {
          type: that.props.type,
        },
        callback: (data) => {
          that.setState({
            moduleList: data || [],
          });
          resolve('成功');
        },
      });
    });
    return p;
  };
  //查询模板设置数据
  queryTreeData = () => {
    this.props.dispatch({
      type: 'profitOverviewM/queryTreeData',
      payload: {
        type: this.props.type,
      },
      callback: (data) => {
        this.setState({
          treeData: data,
        });
      },
    });
  };

  // 模板列表 增删改
  onChangeModuleList = (id, type) => {
    //type 0新增 1编辑 2删除
    this.getModuleList().then((res) => {
      //刷新模板
      if (id == this.state.moduleId && type == '2') {
        //删除的正好是选中的
        //rightContent 恢复到初始化状态
        this.RightRef?.reset();
      }
      if (id == this.state.moduleId && type == '1') {
        //编辑的正好是选中的
        this.setState({
          timeStamp: new Date().getTime(), //模板设置 模板管理重新定位
        });
      }
    });
  };
  //模板设置 选中项变化 需要更新右侧面板加载数据
  currentModuleListChange = (checkedKeys) => {
    this.setState({
      currentModuleList: [...checkedKeys],
    });
  };
  //右侧点击查询时 模板名称id 变化，通知模板管理 模板设置进行定位 同时更新右侧模板对应的数据
  moduleIdChange = (moduleId, timeStamp, currentModuleList) => {
    this.setState({
      moduleId,
      timeStamp,
      currentModuleList,
    });
  };
  render() {
    const { treeData, moduleList, moduleId, timeStamp, currentModuleList } = this.state;

    return (
      <div className={myStyle.content}>
        <LeftMenuC
          type={this.props.type}
          expandFlag={(expandFlag) => this.setState({ expandFlag })}
          treeData={treeData}
          moduleList={moduleList}
          moduleId={moduleId}
          timeStamp={timeStamp}
          onChangeModuleList={this.onChangeModuleList}
          currentModuleListChange={this.currentModuleListChange}
          isFloatLeft={this.props.isFloatLeft}
        />
        <div style={{ width: this.props.isFloatLeft ? '100%' : this.state.expandFlag ? 'calc(100% - 283px)' : 'calc(100% - 66px)' }}>
          <RightContent
            type={this.props.type}
            moduleList={moduleList}
            treeData={treeData}
            currentModuleList={currentModuleList}
            productCode={this.props.productCode}
            moduleIdChange={this.moduleIdChange}
            onRef={(ref) => (this.RightRef = ref)}
            isFloatLeft={this.props.isFloatLeft}
            params={this.props.params}
            portfolioType={this.props.portfolioType}
            flag={this.props.flag} // 基准类别
            indexCode={this.props.indexCode} // 基准id
          />
        </div>
      </div>
    );
  }
}
export default connect(({ profitOverviewM }) => ({
  profitOverviewM,
}))(ProfitOverview);
